<header>
  <!-- <h1>Todo List</h1> -->
  <h1>Todo List ( {{$ctrl.incompleteCount}} )</h1>
</header>
<label class="hide-completed">
  <input type="checkbox" ng-model="$ctrl.hideCompleted"/>
  Hide Completed Tasks
</label>

<login-buttons></login-buttons>

<form class="new-task" ng-submit="$ctrl.addTask($ctrl.newTask)" ng-show="$ctrl.currentUser">
   <input ng-model="$ctrl.newTask" type="text" name="text" placeholder="Type to add new tasks"/>
 </form>
 <hr>
<ul>
  <li ng-repeat="task in $ctrl.tasks" ng-class="{'checked': task.checked, 'private': task.private}">
   <button class="delete" ng-click="$ctrl.removeTask(task)">&times;</button>

   <input type="checkbox" ng-checked="task.checked" ng-click="$ctrl.setChecked(task)" class="toggle-checked"/>

   <span class="text">
     <!-- {{task.text}} -->
     <strong>{{task.username}}</strong> - {{task.text}}
   </span>

   <button class="toggle-private" ng-click="$ctrl.setPrivate(task)" ng-show="task.owner === $ctrl.currentUser._id">
     {{task.private == true ? "Private" : "Public"}}
   </button>

  </li>
</ul>
